<script setup lang="ts">
import type { IResourceModel } from '@/composables/useStatistic'
import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
import { chunk } from 'lodash-es'
import IIconsVpsNode from '~icons/icons/vps-node'
import CloudCard from './CloudCard.vue'

const totalData = defineModel<IResourceModel[]>('data', { default: [] })
const showTotal = defineModel<boolean>('showTotal')
const homeShowTotal = defineModel<boolean>('homeShowTotal')
const type = defineModel<string>('type')

const pageNum = ref<number>(1)
const currentPage = ref(0)

const dataList = ref<IResourceModel[][]>([])

/** 总页数 */
const totalPages = computed(() => Math.ceil(totalData.value?.length / 4))

const showArrowRight = computed(() => totalPages.value > currentPage.value + 1)

// 处理当前页变化
function handleChange(type?: 'right' | 'left') {
  if (type === 'left') {
    pageNum.value -= 1
    currentPage.value -= 1
  }
  if (type === 'right') {
    pageNum.value += 1
    currentPage.value += 1
  }
  updateTableData()
}

// 更新数据
function updateTableData() {
  dataList.value = chunk(totalData.value, 4)
}

onMounted(() => {
  currentPage.value = 0
})

watch(
  () => totalData.value,
  () => {
    updateTableData()
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <div class="relative rounded-xl bg-fill-1">
    <header class="flex items-center gap-x-2 px-6 pt-6">
      <slot name="title">
        <component
          :is="IIconsVpsNode"
          class="size-5!"
        />
        <span class="text-sm font-700">{{ type }}</span>
      </slot>
    </header>
    <div
      v-if="dataList?.length"
      class="carousel-container"
    >
      <div
        id="slider"
        class="slider"
        :style="{ transform: `translateX(${-currentPage * 100}%)` }"
      >
        <template
          v-for="(currentItem, currentIndex) in dataList"
          :key="currentIndex"
        >
          <div class="slide grid grid-cols-4 gap-x-4">
            <template
              v-for="(item, index) in currentItem"
              :key="item.subtitle"
            >
              <div
                class="slide-content flex items-start"
                :class="{
                  content_item: index !== currentItem?.length - 1,
                  dashboard_item: !showTotal,
                }"
              >
                <cloud-card
                  :subtitle="item.subtitle"
                  :data="item.list"
                  :total-data="item?.totalData"
                  :type="type"
                  class="h-full flex-1"
                  :show-total="showTotal"
                  :home-show-total="homeShowTotal"
                  :show-unit="type !== 'IP' ? 'Mbps' : ''"
                />
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    <div
      v-else
      class="min-h-200px flex items-center justify-center"
    >
      <span class="text-xs text-color-3">暂无数据</span>
    </div>
    <a-button
      v-if="currentPage + 1 > 1"
      class="arrow-btn -left-5"
      @click="handleChange('left')"
    >
      <icon-left />
    </a-button>
    <a-button
      v-if="showArrowRight"
      class="arrow-btn -right-5"
      @click="handleChange('right')"
    >
      <icon-right />
    </a-button>
  </div>
</template>

<style scoped lang="less">
.arrow-btn {
  @apply w-10 h-10 bg-white rounded-full! p-0 text-primary border-color-1 shadow-md  absolute z-999;
  top: 50%;
  transform: translateY(-50%);
  &:hover {
    @apply text-primary;
  }
}
:deep(.content_item) {
  @apply relative;
  &::after {
    content: '';
    @apply border-r border-color-2 bottom-5 absolute -right-2;
    height: calc(100% - 40px);
  }
  &.dashboard_item {
    &::after {
      @apply bottom-3;
      height: calc(100% - 36px);
    }
  }
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: auto;
}

.slider {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}

.slide-content {
  height: auto;
}
</style>
